流程控制

一般而言，JavaScript 的程式會照順序由上至下一行一行執行，不過當我們在某條件下不想執行某段程式，或需要重複執行某段程式時，就需要進行流程控制。JavaScript 的結構主要分為三種：順序結構、分支結構、以及循環結構。

• 順序結構
  預設，不做任何流程控制情況下程式執行依序一行一行執行。

  // 一行一行按照順序往下執行
  let a = 12;
  a++;
  console.log(a);
  

• 選擇結構
  依據不同的條件執行不同的程式段落，會透過 if-else、switch 等語句進行控制，在此結構中不管有幾個條件(選擇)，最終都只能有一個被執行。

  // 最終只會執行某個選擇
  if (條件) { // 選擇一
  }
  else { // 選擇二
  }
  

• 迴圈結構
  依照條件重複執行某程式段落，直到不滿足條件，例如 for、while 等。

  while (條件) {
      // 重複執行裡面的程式
  }
  

區塊

在上面的範例中我們可以看到流程控制關鍵字的後面都會跟著 {} 的符號，在 JavaScript 中這個符號代表著程式的區塊，以左大括號 { 為區塊開始，右大括號 } 為結束，主要功能為區分程式碼段落，並不會改變程式的執行順序和執行與否。

• 被 {} 包住的程式執行順序不會改變

  // 執行順序不會被改變，一樣是 1 -> 2 -> 3
  console.log(1);
  {
      console.log(2);
  }
  console.log(3);
  

而在實際開發中，區塊通常會搭配 if-else、while 等控制流程的語句做使用，主要用來指定語句所作用的程式區塊，例如 if (條件) { 符合條件執行的程式 }，而 {} 外則不會受到流程控制的影響。

• 區塊搭配控制流程的語句

  console.log(1); // 其他語句，不受 if 條件影響
  if (a > 0) {
      // 符合 a > 0 時執行區塊中的內容
  }
  console.log(2); // 其他語句，不受 if 條件影響
  

上一篇：[快速入門前端 42] JavaScript：運算式和運算子 (3) 三元運算子與運算子的優先性
下一篇：[快速入門前端 44] JavaScript：條件判斷 (1) if-else 語句
系列文章列表：[快速入門前端] 系列文章索引列表